<template>
	<view class="content-new">
		<view class="herder">
			<view class="header-top">
				<view class="header-border"
					:style="{background:isTrue == true ? '#0da297' : '#fff',color:isTrue == true ? '#fff' : '#000'}"
					@click="deviceFn">
					设备问题
				</view>
				<view class="header-border"
					:style="{background:isTrue == false ? '#0da297' : '#fff',color:isTrue == false ? '#fff' : '#000'}"
					@click="orderFn">
					订单问题
				</view>
			</view>

			<view class="phone-new" v-if="isTrue == true">
				<u-form-item class="header-phone" label-width="auto" label="端口号码:">
					<u-input class="header-input" placeholder="请输入或扫码端口号" maxlength="8" type="number" v-model="deviceNo" />
				</u-form-item>
				<image class="phone-img" :src="url1" mode=""
					@click="handleCodeClick">
				</image>

			</view>
			<view class="phone-news" v-if="isTrue == true">
				<u-form-item class="header-phone" label-width="auto" label="社区名称:">
					<u-input class="header-input" disabled="true" placeholder=" " type="number" v-model="ScanRepairQyery.community" />
				</u-form-item>
			</view>
			<view class="header-title">
				请选择具体情况<span class="header-span">*</span>
			</view>
			<view class="phone-radio" v-if="isTrue == true">
				<u-radio-group class="phone-radio-child" v-model="ScanRepairQyery.bright" @change="radioGroupChange"
					wrap="true">
					<u-radio size="50rpx" v-for="(item, index) in list" :key="index" :name="item.id">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
			<view class="phone-radio" v-if="isTrue == false">
				<u-radio-group class="phone-radio-child" v-model="type" wrap="true">
					<u-radio size="50rpx" name="1" class="top-radio">
						充值订单问题
					</u-radio>
					<button class="top-button" @click="toReCharge" v-if="type == 1">
						选择订单
					</button>
					<view class="order-aside" v-if="orderQuery.id && type == 1">
						{{ '订单号' + orderQuery.id }} <text
							class="order-aside-text">{{ '社区名称' + orderQuery.community_name }}</text>
					</view>
					<u-radio size="50rpx" name="2" class="top-radio">
						充电订单问题
					</u-radio>
					<button class="top-button" @click="toCharge" v-if="type == 2">
						选择订单
					</button>
					<view class="order-aside" v-if="orderQuery1.id && type == 2">
						{{ '订单号' + orderQuery1.id }} <text
							class="order-aside-text">{{ '社区名称' + orderQuery1.community_name }}</text>
					</view>
					<u-radio size="50rpx" name="3">
						其它
					</u-radio>
				</u-radio-group>
			</view>
			<view class="textarea" v-if="isTrue == false">
				<u-input v-model="chargeQuery.content" type="textarea" placeholder="请输入详细情况" border="true" height="150" auto-height="true" />
			</view>
			<view class="textarea" v-if="isTrue == true">
				<u-input v-model="ScanRepairQyery.text" type="textarea" placeholder="请输入详细情况" border="true" height="150"
					auto-height="true" />
			</view>
			<view class="phone">
				<view>
					<u-form-item class="phone-item">
						<u-input placeholder="输入手机号码" maxlength="11" type="number" :clearable="false"
							v-model="chargeQuery.phone" :custom-style="phoneInput" />
					</u-form-item>
				</view>
				<text class="iconfont kang-huafei"></text>
				<view class="verification-code">
					<u-verification-code :seconds="60" ref="uCode" @change="handleCodeChange">
					</u-verification-code>
					<!-- @tap点击事件 -->
					<text @tap="handleGetCodeClick" class="get-code">{{tips}}</text>
				</view>
			</view>
			<view class="phone">
				<view>
					<u-form-item class="phone-item">
						<u-input placeholder="输入验证码" type="number" v-model="chargeQuery.identifying_code" />
					</u-form-item>
				</view>
				<text class="iconfont kang-dunpai"></text>
			</view>
			<view class="submit-new">
				<uv-btn :loading="loading" shape="circle" @click="handleSubmitClick" text="确定提交"
					loading-text="提交中..."></uv-btn>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				//Form data
				deviceNo: '', //用户输入的端口号
				form: {
					equipment: '', //接口查询处理的设备号
					name: '',
					reviews: '',
					phone: '',
					verificationCode: '',

				},
				phoneInput: {
					paddingRight: '120rpx'
				},
				//Verification code component related data
				tips: '',
				//submit
				loading: false,
				//location
				location: {
					longitude: '',
					latitude: ''
				},
				url1:this.$imgUrl+'maintain/repair.png',
				// new
				isTrue: true,
				list: [],
				qodeNum: '',
				chargeQuery: {
					content: '', // 详细情况
					phone: '', // 手机号
					type: '', // 1充值订单问题 2充电订单问题3其他问题
					identifying_code: '', // 验证码
				},
				type: '', // 1充值订单问题 2充电订单问题3其他问题
				orderQuery: {},
				orderQuery1: {},
				ScanRepairQyery: {
					equipment: '', // 端口号
					phone: '', // 手机号
					identifying_code: '', // 手机号验证码
					bright: '', // 1充电器指示灯不亮，排插指示灯不亮，2仅充电器指示灯不亮，3排插指示灯不亮，充电器指示灯亮，4其他
					text:'',
					longitude: '', // 经纬度
					latitude: '', // 经纬度
					image: '', // 已上传的图片视频的url，逗号分隔
					extend_d: '', // 设备插座细节图+端口码结合图 图片url，逗号分隔
					community: '', // 社区名称 
					community_id: '', // 社区ID

				}
			}
		},
		watch: {
			deviceNo(newVal, oldVal) {
				if (newVal.length == 8) {
					//先通过端口号查询真实设备号
					this.$u.api.getEquipment({
						equipment: this.deviceNo,
					}).then(ret => {
						if (ret.data && ret.data.scan) {
							this.ScanRepairQyery.equipment = ret.data.scan;
							this.ScanRepairQyery.community = ret.data.remark.community_name;
							this.ScanRepairQyery.community_id = ret.data.remark.community_id;
						};
						this.$utils.toast(ret.msg);
					});
				} else {
					//reset
					this.ScanRepairQyery.equipment = '';
					this.ScanRepairQyery.community = '';
					this.ScanRepairQyery.community_id = '';
				};
			},
		},

		onLoad() {
			this.indexList();
		},
		onShow() {
			let that = this;
			uni.$on('returnData', function(data) {
				if (that.type == 1) {
					that.orderQuery = data;
				} else if (that.type == 2) {
					that.orderQuery1 = data;
				}

				that.indexList();
			})
			that._isAuthorize();
		},
		methods: {
			// 设备问题按钮
			deviceFn() {
				this.isTrue = true;
			},
			// 订单问题按钮
			orderFn() {
				this.isTrue = false;
			},
			// 跳转到充电记录页面
			toCharge() {
				uni.navigateTo({
					url: "/pages/maintain/repair-Charge"
				})

			},
			// 跳转到充值记录页面
			toReCharge() {

				uni.navigateTo({
					url: "/pages/maintain/repair-Recharge"
				})
			},
			// button change
			radioGroupChange() {

			},
			indexList() {
				this.$u.api.Information().then(res => {
					this.list = res.data.individual;
				}).catch(err => {

				})
			},
			//Scan code to charge
			handleCodeClick() {
				uni.scanCode({
					success: (res) => {
						let str = res.result;
						this.deviceNo = str.slice(-8);
						// 在这里可以对扫码结果进行处理
					},
					fail: (res) => {
						console.log(res);
						// 处理扫码失败的情况
					}
				});

			},
			//form
			handleSubmitClick() {
				if (this.isTrue === false) {
					 if (this.$utils.isAllEmpty(this.type)) {
						this.$utils.toast('问题类型不能为空');
					} else if (this.type == 3 && this.$utils.isAllEmpty(this.chargeQuery.content)) {
						this.$utils.toast('其他选项内容必填');
					}else if (this.$utils.isAllEmpty(this.chargeQuery.phone)) {
						this.$utils.toast('手机号不能为空');
					} else if (this.$utils.isAllEmpty(this.chargeQuery.identifying_code)) {
						this.$utils.toast('验证码不能为空');
					} else if (!this.$utils.isPhone(this.chargeQuery.phone)) {
						this.$utils.toast('手机号格式不正确');
					} else {
						if (this.type == 1) {
							if (!this.orderQuery.id) {
								this.$utils.toast('请选择订单');
							} else {
								this.chargeQuery.type = '充值订单问题,' + '订单号id:' + this.orderQuery.id + ',社区名称' + this
									.orderQuery.community_name
									this.submitRequest();
							}
						} else if (this.type == 2) {
							if (!this.orderQuery1.id) {
								this.$utils.toast('请选择订单');
							} else {
								this.chargeQuery.type = '充电订单问题,' + '订单号id:' + this.orderQuery1.id + ',社区名称' + this
									.orderQuery1.community_name
									this.submitRequest();
							}
						} else {
							this.chargeQuery.type = '其它'
							this.submitRequest();
						}

						
					}
				} else {
					if (this.$utils.isAllEmpty(this.ScanRepairQyery.equipment)) {
						this.$utils.toast('请输入正确端口号');
					} else if (this.$utils.isAllEmpty(this.chargeQuery.phone)) {
						this.$utils.toast('手机号不能为空');
					} else if (this.$utils.isAllEmpty(this.chargeQuery.identifying_code)) {
						this.$utils.toast('验证码不能为空');
					} else if (!this.$utils.isPhone(this.chargeQuery.phone)) {
						this.$utils.toast('手机号格式不正确');
					} else if (this.$utils.isAllEmpty(this.ScanRepairQyery.bright)) {
						this.$utils.toast('问题类型不能为空');
					} else if (this.$utils.isAllEmpty(this.ScanRepairQyery.text)) {
						this.$utils.toast('详细内容不能为空');
					} else {
						this.ScanRepairQyery.phone = this.chargeQuery.phone;
						this.ScanRepairQyery.identifying_code = this.chargeQuery.identifying_code;
						this.loading = true;
						this.$u.api.maintainRepair(this.ScanRepairQyery).then(res => {
							this.loading = false;
							if (res.result_code == '349') {
								this.$utils.toastCallback(res.msg, () => {
									this.$utils.back();
								}, true);
							
							} else {
								this.$utils.modal({
									title: '温馨提示',
									content: res.msg,
									showCancel: false,
								});
							};
						}).catch(err => {
							this.loading = false;
						})
					}
				}
			},
			submitRequest() {
				this.loading = true;
				this.$u.api.orderSubmit(this.chargeQuery).then(res => {
					this.loading = false;
					if (res.result_code == '1000') {
						this.$utils.toastCallback(res.msg, () => {
							this.$utils.back();
						}, true);

					} else {
						this.$utils.modal({
							title: '温馨提示',
							content: res.msg,
							showCancel: false,
						});
					};
				}).catch(err => {
					this.loading = false;
				})
			},
			//verification code
			handleCodeChange(text) {
				this.tips = text;
			},
			handleGetCodeClick() {
				//Verify mobile phone number				
				if (this.$utils.isPhone(this.chargeQuery.phone)) {
					//Is it being acquired
					if (this.$refs.uCode.canGetCode) {
						this.$refs.uCode.start();
						this.getCodeRequest(); //request
					} else {
						this.$utils.toast('正在获取验证码');
					};
				} else {
					this.$utils.toast('请输入正确的手机号格式');
				}
			},
			getCodeRequest() {
				this.$u.api.getChargeRepairCode({
					phone: this.chargeQuery.phone,

					type: '5',
				}).then(res => {
					if (res.result_code == '347') {
						this.$utils.toast('验证码已发送');
					} else {
						this.$utils.toast(res.msg);
					}
				}).catch(err => {})
			},
			//position
			_isAuthorize() {


				// #ifdef	MP-ALIPAY
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						this.ScanRepairQyery.longitude = res.longitude;
						this.ScanRepairQyery.latitude = res.latitude;
					}
				});
				// #endif

				//微信
				// #ifdef	MP-WEIXIN
				const that = this;
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						that._getLocation();
					},
					fail(err) {
						console.log(err);
						that._openAuthorizeModal();
					}
				});
				// #endif

			},
			_getLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						this.location = {
							longitude: res.longitude,
							latitude: res.latitude,
						};
					}
				});
			},
			_openAuthorizeModal() {
				this.$utils.modal({
					title: '请求授权当前位置',
					content: '需要获取您的地理位置，请确认授权',
					callback: (bool) => {
						if (bool) {
							uni.openSetting();
						} else {
							this.$utils.toast('您拒绝了授权，无法获得您的位置');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-new {
		padding-bottom: 30rpx;
	}

	.iconfont {
		color: #0da297;
		font-size: 50rpx;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.form {
		padding: 0 30rpx;
		padding-top: 20rpx;
		padding-left: 30rpx;
	}

	.phone {
		margin: 0 70rpx;
		position: relative;
		padding-left: 70rpx;
	}

	.verification-code {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.submit {
		padding-top: 60rpx;
	}

	.submit-new {
		width: 75%;
		margin: 60rpx 12.5% 0;
	}

	.get-code {
		color: #0da297;
		font-size: 28rpx;
	}

	.header-top {
		display: flex;
		justify-content: space-evenly;
	}

	.header-border {
		margin-top: 50rpx;
		width: 40%;
		height: 200rpx;
		border: 1px solid #ccc;
		line-height: 200rpx;
		text-align: center;
		font-weight: 700;
		border-radius: 20rpx;
	}

	.phone-new {
		display: flex;
		margin: 50rpx 0 0 10%;
	}

	.phone-news {
		margin: 0 0 0 10%;
		width: 74%;
	}

	.header-phone {
		flex: 1;
	}

	.u-form-item {
		box-sizing: border-box;
		padding: 0 !important;
		padding-left: 10rpx;
	}

	.header-input {
		width: 50%;
	}

	.phone-img {
		float: right;
		margin: 30rpx 70rpx 0 0;
		width: 50rpx;
		height: 50rpx;
	}

	.phone-radio {
		margin: 20rpx 0 0 70rpx;
	}

	/deep/ .u-radio {
		line-height: 2.5 !important;
	}

	.textarea {
		margin: 20rpx 70rpx;
		width: 75%;
	}

	.header-title {
		font-size: 30rpx;
		margin: 20rpx 70rpx 0;
	}

	.header-span {
		font-size: 30rpx;
		color: red;
	}

	.top-radio {
		width: 60%;
		display: inline-block;
	}

	.top-button {
		margin: 10rpx 50rpx 0 0;
		float: right;
		padding: 0 15rpx;
		text-align: center;
		font-size: 25rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #fff;
		background: #0da297;
		display: inline-block;
		border-radius: 30rpx;
	}

	.u-input__input {
		padding-left: 30rpx !important;
	}

	.order-aside {
		font-size: 25rpx;
		color: #ccc;
	}

	.order-aside-text {
		margin-left: 20rpx;
	}
</style>
<style>
	page {
		background-color: #fff;
	}
</style>